<template>
  <div ref="chartContainer" class="mini-chart-container"></div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import * as echarts from 'echarts'

// 定义props
const props = defineProps({
  chartData: {
    type: Object,
    default: () => ({
      data: [],
      dates: [],
      smooth: true,
      showArea: true
    })
  },
  color: {
    type: String,
    default: '#67C23A'
  },
  height: {
    type: String,
    default: '200px'
  },
  chartType: {
    type: String,
    default: 'line', // 'line' 或 'bar'
    validator: (value) => ['line', 'bar'].includes(value)
  }
})

// 图表容器引用
const chartContainer = ref(null)
let chartInstance = null

// 初始化图表
const initChart = () => {
  if (!chartContainer.value || !props.chartData.data.length) return

  chartInstance = echarts.init(chartContainer.value)

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        const param = params[0]
        const unit = props.chartType === 'bar' ? '%' : '万元'
        const label = props.chartType === 'bar' ? '百分比' : '交易额'
        //return `${param.name}<br/>${label}: ${param.value}${unit}`
        return `${param.name}<br/>${param.value}`
        
      },
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: props.color,
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    grid: {
      left: props.chartType === 'bar' ? 0 : -20,
      right: props.chartType === 'bar' ? 0 : -20,
      top: 0,
      bottom: 0
    },
    xAxis: {
      type: 'category',
      show: false,
      data: props.chartData.dates?.length ? props.chartData.dates : props.chartData.data.map((_, index) => `第${index + 1}天`)
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [{
      type: props.chartType,
      data: props.chartType === 'bar' ? 
        props.chartData.data.map((value, index) => ({
          value,
          itemStyle: {
            color: index % 2 === 0 ? '#409EFF' : '#67C23A' // 单数索引蓝色，双数索引绿色
          }
        })) : props.chartData.data,
      smooth: props.chartType === 'line' ? (props.chartData.smooth ?? true) : undefined,
      symbol: props.chartType === 'line' ? 'none' : undefined,
      lineStyle: props.chartType === 'line' ? {
        width: 2,
        color: props.color
      } : undefined,
      areaStyle: (props.chartType === 'line' && (props.chartData.showArea ?? true)) ? {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: `${props.color}4D` }, // 30% opacity
            { offset: 1, color: `${props.color}1A` }  // 10% opacity
          ]
        }
      } : null,
      barWidth: props.chartType === 'bar' ? '30%' : undefined
    }]
  }

  chartInstance.setOption(option)
}

// 更新图表
const updateChart = () => {
  if (chartInstance && props.chartData.data.length) {
    chartInstance.setOption({
      xAxis: {
        data: props.chartData.dates?.length ? props.chartData.dates : props.chartData.data.map((_, index) => `第${index + 1}天`)
      },
      series: [{
        type: props.chartType,
        data: props.chartType === 'bar' ? 
          props.chartData.data.map((value, index) => ({
            value,
            itemStyle: {
              color: index % 2 === 0 ? '#409EFF' : '#67C23A'
            }
          })) : props.chartData.data,
        smooth: props.chartType === 'line' ? (props.chartData.smooth ?? true) : undefined
      }]
    })
  }
}

// 监听图表数据变化
watch(() => props.chartData, () => {
  updateChart()
}, { deep: true })

// 监听颜色变化
watch(() => props.color, () => {
  if (chartInstance && props.chartType === 'line') {
    chartInstance.setOption({
      series: [{
        lineStyle: {
          color: props.color
        },
        areaStyle: (props.chartData.showArea ?? true) ? {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: `${props.color}4D` },
              { offset: 1, color: `${props.color}1A` }
            ]
          }
        } : null
      }]
    })
  }
})

// 监听图表类型变化
watch(() => props.chartType, () => {
  if (chartInstance) {
    initChart() // 重新初始化图表
  }
})

// 组件挂载时初始化图表
onMounted(() => {
  setTimeout(() => {
    initChart()
  }, 100)
})

// 组件卸载时销毁图表
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

<style scoped>
.mini-chart-container {
  width: 100%;
  height: v-bind(height);
}
</style>